<template>
  <div class="relative-api-container">
    <input type="text" v-model="textValue" />
    <h1>{{ textValue }}</h1>
  </div>
</template>

<script>
import { reactive,readonly,ref,watchEffect } from 'vue'
export default {
    setup() {
        let textValue = ref("asdf");
        let reactiveVal = reactive({name:'hhf',age:'18'});
        let readonlyVal = readonly({name:'gzy',age:'16'});
        reactiveVal.name = "adf";
        window.readonlyVal = readonlyVal;
        window.reactiveVal = reactiveVal;
        console.log(reactiveVal);
        return {
            textValue,
            reactiveVal,
            readonlyVal
        }
        
    }

}
</script>

<style>
</style>